<template>
  <div v-if="details">
    <!-- header -->
    <navbar :scrolltoShow="50">{{ details.name }}</navbar>
    <!-- 大图  -->
    <div
      @click="ImgPreview([details.poster])"
      :style="{
        backgroundImage: `url(${details.poster})`,
      }"
      class="banner"
    ></div>
    <!-- 介绍页面  -->
    <div class="detailsInfo">
      <div class="title">
        <div>
          {{ details.name }} <span>{{ details.item.name }}</span>
        </div>
        <i>{{ details.grade }}分</i>
      </div>
      <div>{{ details.category }}</div>
      <!-- 过滤器处理 数据 -->
      <div>{{ details.premiereAt | premiereAtHandle }}上映</div>
      <div>{{ details.nation }} | {{ details.runtime }}分钟</div>

      <!-- 介绍 -->
      <div class="filmInfo" :class="infoHidden ? 'hidden' : ''">
        {{ details.synopsis }}
      </div>
      <div style="text-align: center">
        <i
          class="iconfont icon"
          :class="infoHidden ? 'icon-jiantouxia' : 'icon-jiantoushang'"
          @click="infoHidden = !infoHidden"
        ></i>
      </div>
    </div>
    <!-- 主演轮播图 -->
    <div class="swiperActors">
      <div class="titleBar">演职人员</div>
      <my-swiper :perView="3.5" siperName="actors">
        <swiper-item v-for="item in details.actors" :key="item.avatarAddress">
          <div class="actors">
            <img
              :src="item.avatarAddress"
              alt=""
              @click="ImgPreview([item.avatarAddress])"
            />
            <div>{{ item.name }}</div>
            <div class="role">{{ item.role }}</div>
          </div>
        </swiper-item>
      </my-swiper>
    </div>
    <!-- 剧照 -->
    <div class="swiperActors swiperPhotos">
      <div class="titleBar">
        剧照<span
          >全部({{ details.photos | photosHandle }})
          <i class="iconfont icon-jiantouyou"></i
        ></span>
      </div>
      <my-swiper :perView="2.5" siperName="photos">
        <swiper-item
          v-for="(item, index) in details.photos"
          :key="item.avatarAddress"
        >
          <div>
            <img
              :src="item"
              alt=""
              @click="ImgPreview(details.photos, index)"
            />
          </div>
        </swiper-item>
      </my-swiper>
    </div>
  </div>
</template>

<script>
// 引入图库
import '@/assets/font_3180509_lh96vsafsw/iconfont.css'
// 导入vue
import Vue from 'vue'
// 引入组件navbar
import navbar from '@/components/listDetails/navbar.vue'
// 导入时间小模块
import moment from 'moment'
// 导入封装好的axios 模块
import http from '@/util/http'
// 导入轮播图组件
import mySwiper from '@/components/listDetails/listSwiper.vue'
import swiperItem from '@/components/listDetails/swiperItem.vue'
// 引入ImagePreview函数
import { ImagePreview } from 'vant'
// 引入工具类showTab
import showTab from '@/util/showTab'

// 挂载过滤
Vue.filter('premiereAtHandle', (data) => {
  return moment(data * 1000).format('YYYY-MM-DD')
})
// 挂载过滤
Vue.filter('photosHandle', (data) => {
  if (!data) return 0
  return data.length
})
export default {
  mixins: [showTab],
  components: { swiperItem, mySwiper, navbar },
  data () {
    return {
      details: null,
      infoHidden: true
    }
  },
  mounted () {
    http({
      url: `/gateway?filmId=${this.$route.params.id}&k=4395129`,
      headers: {
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then((res) => {
      this.details = res.data.data.film
    })
  },
  methods: {
    // 定义图片点击事件
    ImgPreview (src, index) {
      ImagePreview({
        // 要显示的图片 是个数组
        images: src,
        // 是否要显示关闭图标
        closeable: true,
        // 开始的位置
        startPosition: index || 0,
        closeIconPosition: 'top-left'
      })
    }
  }
}
</script>
<style scoped lang='scss'>
$colorText1: #797d82;
$colorText2: #191a1b;
$themeColor: #ffb232;
.banner {
  width: 100%;
  height: 13.625rem;
  background-position: center;
  background-size: cover;
}
.detailsInfo {
  width: 100%;
  padding: 0.75rem 0.9375rem 0.9375rem;
  font-size: 13px;
  color: $colorText1;
  background: #fff;
  > div {
    margin-top: 0.25rem;
  }
  .title {
    display: flex;
    color: $colorText2;
    font-size: 18px;
    justify-content: space-between;
    span {
      background: #d2d6dc;
      color: #fff;
      font-size: 12px;
      padding: 0 2px;
      height: 14px;
      line-height: 14px;
    }
    i {
      color: $themeColor;
    }
  }
  .filmInfo {
    margin-top: 0.75rem;
    line-height: 19px;
    transition: all 0.5s;
  }
  .hidden {
    overflow: hidden;
    height: 2.375rem;
  }
}

.icon {
  font-size: 12px;
  color: #ddd;
}
.swiperActors {
  padding: 0.9375rem;
  background: #fff;
  width: 100%;
  margin: 0.9375rem 0;
  img {
    width: 5.3125rem;
    height: 6.9375rem;
  }
  .actors {
    text-align: center;
    font-size: 13px;
    color: $colorText2;

    div {
      padding-top: 0.625rem;
    }
    .role {
      padding-top: 0;
      color: $colorText1;
    }
  }
}

.titleBar {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0.9375rem 0;
  font-size: 16px;
  color: $colorText2;
  span {
    color: $colorText1;
    font-size: 13px;
    i {
      color: #ddd;
      font-size: 12px;
    }
  }
}
.swiperPhotos {
  div {
    margin-right: 1.25rem;
    img {
      width: 9.375rem;
      height: 6.25rem;
    }
  }
}
</style>
